<template>
  <div class="total">
    <!--事件帅选的定位盒子-->
    <div class="year_box">
      <el-date-picker
        v-model="year"
        type="year"
        @change="getHomeListByYear(year)"
        placeholder="选择年"
        value-format="yyyy">
      </el-date-picker>
    </div>
    <!--事件帅选的定位盒子-->
     <div class="total_data">
         <div class="getIntegralTotal">
           <div class="top">总户数</div>
           <div class="bottom">{{total.totalHome}}户</div>
         </div>
       <div class="getIntegralTotal">
         <div class="top">总参与户数</div>
         <div class="bottom">{{total.totalInHome}}户</div>
       </div>
       <div class="getIntegralTotal">
         <div class="top">总参与人数</div>
         <div class="bottom">{{total.totalMemberNum}}人</div>
       </div>
       <div class="getIntegralTotal">
         <div class="top">总积分</div>
         <div class="bottom">{{total.totalIntegral}}分</div>
       </div>
     </div>
    <!--未开发时候显示-->
    <!--<p v-if="scoreList.length==0" style="font-size: 60px;color: #cccccc;position: absolute;left: 50%;top:50%;transform:translateY(-50);transform:translateX(-50%)">暂无数据...</p>-->
    <NoData v-if="flag"></NoData>
    <!--未开发时候显示-->
    <div class="ranking_list">
      <div :key="index" v-for="(item,index) in scoreList" class="ranking_item" @click="toDetail(item.code)">
        <div class="img" v-if="item.heard_img"><img :src="item.heard_img"/></div>
        <div class="img" v-else><img src="../../../assets/images/default.png"/></div>
        <div class="ranking_con">
          <h2 class="name">{{item.name}}家庭</h2>
          <p class="score">总积分：{{item.score}}分</p>
          <p class="score">已兑换积分：{{parseInt(item.score) - parseInt(item.available_score)}}分</p>
          <p class="score">剩余积分：{{item.available_score}}分</p>
        </div>
        <div class="mark">{{index+1}}</div>
      </div>
    </div>



  </div>
</template>

<script>
    import NoData from '../../../components/nodata/NoData'
    export default {
      name: "ranking",
      data(){
        return{
            scoreList:[],//家庭积分排行榜
            total:{},//统计总参如人数
            flag:false,//是否显示暂无数据，默认不显示
            year:'',//选择的年份
        }
      },

      components:{
        NoData
      },

      created(){
        this.$emit('childData',this.$route.query.childdata);
        this.GetTotal();
         this.getHomeScoreList();
      },
      methods: {
        GetTotal(){
          this.$http.get("/api/ScreenkApi/getIntegralTotal",{vollege_id:this.$util.vollege_id},r=>{
            console.log('获得统计的数据：',r.data);
            this.total=r.data;
          });

        },//获得积分统计


        toDetail(code){
          // console.log('点击进入家庭积分详情页面！:',code);
          this.$util.storage.set("code",code);
          this.$router.push({path:'/family_score',query:{pid:this.$route.query.pid}});
        },
        getHomeScoreList(){
          this.$http.get("/api/ScreenkApi/getHomeScoreList?page=1&limit=100000",{vollege_id:this.$util.vollege_id},r=>{
               console.log("积分排行榜数据:",r.data.data);
               this.scoreList=r.data.data;
               if (this.scoreList.length==0){
                 this.flag=true;
               }
          });
        },//获取家庭积分排行数据集
        getHomeScoreListByYear(year){
          let that = this;
          that.$http.get("/api/ScreenkApi/getHomeScoreList?page=1&limit=100000",{year:year,vollege_id:that.$util.vollege_id},r=>{
            console.log("筛选积分排行榜数据:",r.data.data);
            that.scoreList=r.data.data;
            if(that.scoreList.length==0){
              that.flag=true;
            }else {
              that.flag=false;
            }

          });
        },
        getTotalByYear(year){
          let that = this;
          that.$http.get("/api/ScreenkApi/getIntegralTotal",{year:year,vollege_id:that.$util.vollege_id},r=>{
            console.log('筛选获得统计的数据：',r.data);
            that.total=r.data;
          });
        },

        getHomeListByYear(year){
          let that = this;
          console.log('year:',year);
          if (!year){
            that.getHomeScoreList();
            that.GetTotal();
            return;
          } //重置数据
          let currentYear= new Date().getFullYear();
          let lastYear = currentYear - 1;
          that.getHomeScoreListByYear(year);
          that.getTotalByYear(year);
          // if (year.toString()==currentYear.toString() || lastYear.toString()== year.toString()) {
          //   console.log('true');
          //   that.getHomeScoreListByYear(year);
          //   that.getTotalByYear(year);
          // }




        },//根据年份进行帅选




      }
    }
</script>

<style scoped>
  .total{
    height: 98%;
    width: 100%;
    box-sizing: border-box;
    overflow: scroll;
  }
  .year_box{
    box-sizing: border-box;
    padding: 0px 0px 20px 20px;
  }
  .total_data{
    height: 88px;
    display: flex;
  }
  .getIntegralTotal{
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .top{
    text-align: center;
    flex: 1;
    font-size: 30px;
    font-weight: bold;
    color: #333;
    font-family: 微软雅黑;
  }
  .bottom{
    text-align: center;
    flex: 1;
    font-size: 26px;
    color: #34cc8c;
    font-family: 微软雅黑;

  }

  .ranking_list{
     display: flex;
     flex-wrap: wrap;
     /*justify-content: space-between;*/
     box-sizing: border-box;
     padding-top: 30px;
  }
  .ranking_item{
    float: left;
    position: relative;
    width: 400px;
    height: 270px;
    padding: 30px 20px;
    /*margin: 0 10px 40px;*/
    margin-right: 73px;
    margin-bottom: 73px;
    border-radius: 8px;
    background: #f9f9f9;
    -webkit-box-shadow: 2px 4px 5px rgba(0, 0, 0, .1);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, .1);
  }
  .ranking_item:nth-child(3n+3){
    margin-right: 0px;
  }


  .ranking_item .img{
    float: left;
    margin-right: 20px;
  }
  .ranking_item img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
  .ranking_con .name {
    padding-top: 5px;
    padding-bottom: 10px;
    font-size: 28px;
  }
  .ranking_con .score{
    font-size: 24px;
    box-sizing: border-box;
    padding-top: 6px;
    padding-left: 100px;
  }
  .mark{
    position: absolute;
    top: 0;
    right: 20px;
    width: 70px;
    height: 75px;
    font-size: 34px;
    text-align: center;
    line-height: 70px;
    /*color:#3c87fa;*/
    color: white;
    /*background: url("../../../assets/images/page/no.png") no-repeat;*/
    background: url("../../../assets/images/page/no_new2.png") no-repeat;
  }
  .ranking_item:first-child .mark{
    color: #fff;
    background: url("../../../assets/images/page/no1.png") no-repeat;
    /*background: url("../../../assets/images/page/no_new1.png") no-repeat;*/
  }
  .ranking_item:nth-child(2) .mark{
    color: #fff;
    background: url("../../../assets/images/page/no2.png") no-repeat;
    /*background: url("../../../assets/images/page/no_new2.png") no-repeat;*/
  }
  .ranking_item:nth-child(3) .mark{
    color: #fff;
    /*background: url("../../../assets/images/page/no3.png") no-repeat;*/
    background: url("../../../assets/images/page/no_new1.png") no-repeat;
  }


</style>
